CSSPageDescriptors

Diese Schnittstelle erbt auch Eigenschaften von ihrem Elternteil, CSSStyleDeclaration.

margin Experimentell

Ein String, der die margin-Eigenschaft der entsprechenden @page-at-rule darstellt.

margin-top Experimentell

Ein String, der die margin-top-Eigenschaft der entsprechenden @page-at-rule darstellt.

marginTop Experimentell

Ein String, der die margin-top-Eigenschaft der entsprechenden @page-at-rule darstellt.

margin-right Experimentell

Ein String, der die margin-right-Eigenschaft der entsprechenden @page-at-rule darstellt.

marginRight Experimentell

Ein String, der die margin-right-Eigenschaft der entsprechenden @page-at-rule darstellt.

margin-bottom Experimentell

Ein String, der die margin-bottom-Eigenschaft der entsprechenden @page-at-rule darstellt.

marginBottom Experimentell

Ein String, der die margin-bottom-Eigenschaft der entsprechenden @page-at-rule darstellt.

margin-left Experimentell

Ein String, der die margin-left-Eigenschaft der entsprechenden @page-at-rule darstellt.

marginLeft Experimentell

Ein String, der die margin-left-Eigenschaft der entsprechenden @page-at-rule darstellt.

page-orientation Experimentell

Ein String, der die page-orientation-Eigenschaft der entsprechenden @page-at-rule darstellt.

pageOrientation Experimentell

Ein String, der die page-orientation-Eigenschaft der entsprechenden @page-at-rule darstellt.

size Experimentell

Ein String, der die size-Eigenschaft der entsprechenden @page-at-rule darstellt.

Diese Schnittstelle erbt die Methoden ihres Elternteils, CSSStyleDeclaration.

Dieses Beispiel erhält die CSSPageDescriptors für eine @page-at-rule, falls das Objekt im Browser unterstützt wird, und protokolliert dann seine Eigenschaften.

<pre id="log"></pre>

const logElement = document.querySelector("#log");
function log(text) {
  logElement.innerText = `${logElement.innerText}${text}\n`;
  logElement.scrollTop = logElement.scrollHeight;
}

#log {
  height: 280px;
  overflow: scroll;
  padding: 0.5rem;
  border: 1px solid black;
}

CSS

Unten definieren wir Stile für die Seite mit einer @page-at-rule. Wir weisen jeder Margin-Eigenschaft unterschiedliche Werte mit der margin-Kurzform zu und spezifizieren auch die size. Wir setzen die page-orientation nicht. Dies ermöglicht uns zu sehen, wie die Eigenschaften im Web-API-Objekt zugeordnet werden.

@page {
  margin: 1cm 2px 3px 4px;
  /* page-orientation: upright; */
  size: A4;
}

JavaScript

Zuerst überprüfen wir, ob CSSPageDescriptors im globalen Fensterobjekt definiert ist, und wenn nicht, protokollieren wir, dass die Schnittstelle nicht unterstützt wird.

Falls CSSPageDescriptors unterstützt wird, erhalten wir das Dokument-Stilesheet an Index 1 und dann die in diesem Stylesheet definierten cssRules. Wir müssen dieses Stylesheet erhalten, da das Beispiel in einem separaten Rahmen mit eigenem Stylesheet eingebettet ist (Index 0 ist das CSS für diese Seite).

Wir durchlaufen die definierten Regeln für das Live-Beispiel und vergleichen alle, die vom Typ CSSPageRule sind, da diese den @page-Regeln entsprechen. Für die passenden Objekte protokollieren wir dann den style und alle seine Werte.

if (typeof window.CSSPageDescriptors === "undefined") {
  log("CSSPageDescriptors is not supported on this browser.");
} else {
  // Get stylesheets for example and then get its cssRules
  const myRules = document.styleSheets[1].cssRules;
  for (const rule of myRules) {
    if (rule instanceof CSSPageRule) {
      log(`${rule.style}`);
      log(`margin: ${rule.style.margin}`);

      // Access properties using CamelCase syntax
      log(`marginTop: ${rule.style.marginTop}`);
      log(`marginRight: ${rule.style.marginRight}`);
      log(`marginBottom: ${rule.style.marginBottom}`);
      log(`marginLeft: ${rule.style.marginLeft}`);
      log(`pageOrientation: ${rule.style.pageOrientation}`);

      // Access properties using snake-case syntax
      log(`margin-top: ${rule.style["margin-top"]}`);
      log(`margin-right: ${rule.style["margin-right"]}`);
      log(`margin-left: ${rule.style["margin-left"]}`);
      log(`margin-bottom: ${rule.style["margin-bottom"]}`);
      log(`page-orientation: ${rule.style["page-orientation"]}`);

      log(`size: ${rule.style.size}`);

      // Log the original CSS text using inherited property: cssText
      log(`cssText: ${rule.style.cssText}`);
      log("\n");
    }
  }
}

Ergebnisse

Die Ergebnisse werden unten gezeigt. Beachten Sie, dass das style-Objekt, das oben im Protokoll angezeigt wird, ein CSSPageDescriptors sein sollte, um der aktuellen Spezifikation zu entsprechen, in einigen Browsern jedoch ein CSSStyleDeclaration sein kann. Beachten Sie auch, dass die entsprechenden Werte für Eigenschaften in Camel- und Snake-Case einander und der @page-Deklaration entsprechen und dass page-orientation der leere String "" ist, da es nicht in @page definiert ist.